<template>
  <div class="person-info">
    <div class="card-title">
      <h3>成果归档</h3>
      <el-button type="primary" @click="addFile">添加附件</el-button>
    </div>
    <div class="card-table">
      <el-table :data="projectFileList" border style="width: 100%">
        <el-table-column align="center" prop="fileName" label="文件名称 ※">
          <template slot="header">
            <span class="custom-table-header">文件名称 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.fileName" placeholder="文件名称" />
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="fileType" label="文件类型">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fileType" placeholder="文件类型" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="licensor" label="批准人">
          <template slot-scope="scope">
            <el-input v-model="scope.row.licensor" placeholder="批准人" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="editor" label="编写人">
          <template slot-scope="scope">
            <el-input v-model="scope.row.editor" placeholder="编写人" />
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="fileRemark" label="备注 ※">
          <template slot="header">
            <span class="custom-table-header">备注 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.fileRemark" placeholder="备注" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="nowAction == 'edit'"
          align="center"
          label="下载文件"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.fileSaveName == ''"
              type="primary"
              size="mini"
              @click="downloadFile(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="center" width="250" label="上传文件">
          <template slot-scope="scope">
            <el-upload
              class="upload-demo"
              name="file"
              :show-file-list="false"
              :headers="headers"
              :multiple="false"
              :limit="1"
              :before-upload="beforeUpload"
              :action="uploadPath"
              :on-exceed="handleExceed"
              :on-success="
                (response, file, projectFileList) =>
                  uploadSuccess(scope.row, response, file, projectFileList)
              "
              :file-list="uploadFileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="delFile(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  uploadPath,
  detailDownloadFile
} from '@/api/technology-project/project-manage'
import { getToken } from '@/utils/auth'
export default {
  props: {
    nowAction: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      uploadPath,
      projectFileList: [],
      uploadFileList: []
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  methods: {
    addFile() {
      const item = {
        fileId: '',
        fileName: '',
        fileSaveName: '',
        fileType: '',
        licensor: '',
        editor: '',
        fileRemark: '',
        index: this.projectFileList.length
      }
      this.projectFileList.push(item)
    },
    delFile(row) {
      const itemIndex = this.projectFileList.findIndex(
        (x) => x.index === row.index
      )
      this.projectFileList.splice(itemIndex, 1)
    },
    beforeUpload(file) {
      const isPDF = file.type === 'application/pdf'
      const isLt = file.size / 1024 / 1024 / 1024 <= 1
      if (!isPDF) {
        this.$message.error('上传文件只支持PDF格式！')
      }
      if (!isLt) {
        this.$message.error('上传文件大小不能超过1GB！')
      }
      return isLt && isPDF
    },
    handleExceed(files, projectFileList) {
      this.$message.warning(
        `一条附件信息只可以选择 1 个文件，如需添加更多文件请点击 “添加附件”`
      )
    },
    uploadSuccess(row, response, file, projectFileList) {
      this.$message.success(`上传成功`)
      this.projectFileList[row.index].fileId = response.data.fileId
      this.projectFileList[row.index].fileName = response.data.fileName
      this.projectFileList[row.index].fileSaveName = response.data.fileSaveName
      // const fileArr = response.data.fileName.split('.')
      // this.projectFileList[row.index].fileType = fileArr[fileArr.length - 1]
    },
    downloadFile(row) {
      if (row.fileSaveName) {
        let params = {
          fileSaveName: row.fileSaveName
        }
        detailDownloadFile(params)
          .then((response) => {
            if (!response) return
            let blob = new Blob([response.data], {
              type: 'application/vnd.ms-excel;charset=utf-8'
            })
            let url = window.URL.createObjectURL(blob)
            let aLink = document.createElement('a')
            aLink.style.display = 'none'
            aLink.href = url
            aLink.setAttribute('download', row.fileName)
            document.body.appendChild(aLink)
            aLink.click()
            document.body.removeChild(aLink)
            window.URL.revokeObjectURL(url)
          })
          .catch((response) => {
            if (!response) return
            let blob = new Blob([response.data], {
              type: 'application/vnd.ms-excel;charset=utf-8'
            })
            let url = window.URL.createObjectURL(blob)
            let aLink = document.createElement('a')
            aLink.style.display = 'none'
            aLink.href = url
            aLink.setAttribute('download', row.fileName)
            document.body.appendChild(aLink)
            aLink.click()
            document.body.removeChild(aLink)
            window.URL.revokeObjectURL(url)
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.person-info {
  .card-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    h3 {
      margin-right: 20px;
    }
  }
}
</style>